<template>
  <div id="echarts" style="height: 50vh;width: 100%;"></div>
</template>

<script>
  //全部引入
  import { graphicData } from '@/api/bug'
  import { mapGetters } from 'vuex'
  import { histogramToPinChartData } from '@/utils/process-selection'

  let echarts = require('echarts')
  export default {
    name: 'pieChart',
    data(){
      return{
        numberData: [],
      }
    },
    computed:{
      ...mapGetters(['projectId'])
    },
    mounted() {
      this.getData()
    },
    methods: {
      //从后台获取数据
      getData(){
        graphicData({id:this.projectId}).then(res =>{
          this.numberData = histogramToPinChartData(res.data)
          this.initCharts();
        })
      },
      initCharts() {
        this.chart = echarts.init(this.$el);
        this.setOptions();
      },
      setOptions() {
        this.chart.setOption({
          title: {
            text: '缺陷数据图'
          },
          // tooltip: {},
          // xAxis: {
          //   data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
          // },
          // visualMap: {
          //   show: false,
          //   min: 0,
          //   max: 50,
          //   dimension: 0,
          //   inRange: {
          //     color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
          //   }
          // },
          // yAxis: {},
          series: [
            {
              type: 'pie',
              data: this.numberData
            }
          ]
        })
      }
    }
  }
</script>

<style scoped>

</style>
